<template>
  <div>
  <el-row>
    <el-col :span="6" style="margin-bottom:20px;">
      是否自动投标：
      <el-select v-model="auto.value"
        placeholder="请选择"
        :clearable="true"
        @change="getTableDate">
        <el-option
          v-for="item in auto.options"
          :key="item.value"
          :label="item.label"
          :value="item.value"
          >
        </el-option>
      </el-select>
    </el-col>
    <el-col :span="6" style="margin-bottom:20px;">
      标的类型：
      <el-select v-model="biaoType.value"
        placeholder="请选择"
        :clearable="true"
        @change="getTableDate">
        <el-option
          v-for="item in biaoType.options"
          :key="item.value"
          :label="item.label"
          :value="item.value"
          >
        </el-option>
      </el-select>
    </el-col>
  </el-row>
  <el-table :data="capital" border style="width: 100%">
    <el-table-column v-for="(item,index) in capitalTit" :key="index" :prop="item.prop" :label="item.label" :min-width="item.width">
      <template slot-scope="scope">
        <!-- <a target="_blank" :href="`http://www.wsloan.com/invest-detail/?id=${scope.row.id}&type=${rawFblx(scope.row.fBlx)}`" v-if="item.prop === 'cTitle'">{{scope.row.cTitle}}</a> -->
        <a target="_blank" :href="`http://www.wsloan.com/jkxq.aspx?id=${scope.row.id}`" v-if="item.prop === 'cTitle'">{{scope.row.cTitle}}</a>
        <span v-else>{{scope.row[item.prop]}}</span>
      </template>
    </el-table-column>
  </el-table>
  <div style="margin: 30px 0;">
    <el-pagination @current-change="handleCurrentChange" :page-size="pageSize" layout="prev, pager, next, jumper" :total="total">
    </el-pagination>
  </div>

  </div>
</template>
<script>
export default {
  data() {
    return {
      id:this.$route.params.id,
      auto:{
        value:'',
        options:[
          {value:0,label:'非自动'},
          {value:1,label:'自动'},
        ]
      },
      biaoType:{
        value:'',
        options:[
          {value:0,label:'未审核'},
          {value:1,label:'待还款'},
          {value:2,label:'已完成'},
        ]
      },
      capitalTit:[{
          prop:'cTitle',
          label:'名称',
          width: '100'
        },{
          prop:'fTze',
          label:'投资金额',
          width: '100'
        },{
          prop:'fNlx',
          label:'年利率',
          width: '100'
        },{
          prop:'cQixian',
          label:'投资期限',
          width: '100'
        },{
          prop:'fZlx',
          label:'总利息',
          width: '100'
        },{
          prop:'fYlixi',
          label:'月利息',
          width: '100'
        },{
          prop:'fSxf',
          label:'月手续费',
          width: '100'
        },{
          prop:'fJlx',
          label:'加息利息',
          width: '100'
        },{
          prop:'tBmshsj',
          label:'审核时间',
          width: '100'
        },{
          prop:'tHwsj',
          label:'到期时间',
          width: '100'
        },{
          prop:'fDsyje',
          label:'待还金额',
          width: '100'
        },{
          prop:'fBlx',
          label:'标的类型',
          width: '100'
        },{
          prop:'tDate',
          label:'投资时间',
          width: '150'
        },{
          prop:'财智客服',
          label:'财智客服',
          width: '100'
        }
      ],
      capital:[],
      total: 0,
      pageSize: 20,
      page:1,
    }
  },
  methods: {
    rawFblx(fblx){
      switch(fblx){
        case '转贷宝':
          return 5
        case '温商宝':
          return 6
        case '新手标':
          return 7
        case '债权转让':
          return 8
        case '福利标':
          return 9
        case '个人借贷':
          return 10
        case '车车贷':
          return 11
        case '财智标':
          return 12
        case '保证金':
          return 13
        case '安存宝':
          return 15
        case '商户通':
          return 16
      }
    },
    handleCurrentChange(val) {
      this.page = val
       this.getTableDate()
    },
    getTableDate () {
      const page = this.page
      this.$get(this,{api:'member/loadBid.do',data: {
        fUid:this.id,
        fShzt:this.biaoType.value,
        fIszd:this.auto.value,
        pageSize: this.pageSize,
        page,
      }
      }).then(({data})=>{
        if (data.state === 0) {
          if (page == 1) {
            this.total = data.content.num;
          }
          //标的类型{5:转贷宝,6:温商宝,7:新手标,8:债权转让,9:福利标,10:个人借贷,11:车车贷,12:财智标,13:保证金,15:安存宝}16商户通
          data.content.data.forEach(function(obj) {
             if (obj.fBlx == 5)  obj.fBlx="转贷宝"
             if (obj.fBlx == 6)  obj.fBlx="温商宝"
             if (obj.fBlx == 7)  obj.fBlx="新手标"
             if (obj.fBlx == 8)  obj.fBlx="债权转让"
             if (obj.fBlx == 9)  obj.fBlx="福利标"
             if (obj.fBlx == 10)  obj.fBlx="个人借贷"
             if (obj.fBlx == 11)  obj.fBlx="车车贷"
             if (obj.fBlx == 12)  obj.fBlx="财智标"
             if (obj.fBlx == 13)  obj.fBlx="保证金"
             if (obj.fBlx == 15)  obj.fBlx="安存宝"
             if (obj.fBlx == 16)  obj.fBlx="商户通"
          }, this);
          this.capital = data.content.data;
        } else {
          this.$toast({
            message: data.message
          })
        }
      })
    }
  },
  mounted () {
    this.getTableDate(1);
  }
}
</script>


